<template>
    <div class="myradio">
        <div class="header space-between padding-24 bg-active">
            <div class="h-back" @click="goBack"><img :src="back" alt=""></div>
            <div class="fs-32 color-f" :class="{active:cur==1}" @click="select(1)">我订阅的电台</div>
            <div class="fs-32 color-f" :class="{active:cur==2}" @click="select(2)">我创建的电台</div>
            <div class="h-right"><img :src="play" alt=""></div> 
      </div>
      <div class="contents">
        <div class="music-list" v-if="cur==1">
            <div v-if="myradiolist[0]">
                <div class="list-item bg-f padding-24 space-between" v-for="item in myradiolist" @click="gotoradiodetail(item)">
                    <img :src="item.radio_cover" alt="" class="cove">
                    <div class="right flex-column">
                        <p class="fs-32 ">{{item.radio_name}}</p>
                        <div class="space-between">
                            <div class="center-col">
                                <img :src="item.user_info.user_avator" alt="" class="yuan">
                                <p class="fs-22">{{item.user_info.nickname}}</p>
                                <img :src="fire" alt="" class="fire">
                                <p class="fs-22">{{item.subscription_number}}</p>
                                <!-- <p class="fs-22 color-9">{{item.singer_artistic_name}}，{{item.music_number}}首</p> -->
                            </div>
                            <p>{{item.time}}</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="center" v-else>您还没有订阅电台~</div>
            <!-- <div class="center" >-- {{text}} --</div> -->
        </div>
        <div class="music-list" v-if="cur==2">
            <div v-if='iszhbo'>
                <div v-if="radiolist[0]">
                    <div class="list-item bg-f padding-24 space-between" v-for="item in radiolist" >
                        <img :src="item.music_list_photo" alt="" class="cove">
                        <div class="right">
                            <p class="fs-32 overFlow">{{item.music_list_name}}</p>
                            <p class="fs-22">{{item.name}}</p>
                            <div class="center-col">
                                <img :src="fire" alt="" class="fires">
                                <p class="fs-22">{{item.num}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="center" v-else>
                    <div class="box">
                        <img :src="zhubo" alt="">
                        <p class="fs-36">您已是主播</p>
                        <p class="fs-28">请前往音乐<span class="color-active">网页端</span>的创作者中心，发布电台节目</p>
                    </div>
                </div>
            </div>
            <div class="" v-else>
                <div class="center">
                    <div class="flex-column">
                        <p>您暂时还不是主播，创建不了电台</p>
                        <router-link to="hostapply" class="btn bg-p color-f fs-32 center">申请成为主播</router-link>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            cur:1,
            iszhbo:false,
            back:require('../../assets/index/back.png'),
            play:require('../../assets/index/play.png'),
            fire:require('../../assets/mine/fire.png'),
            zhubo:require('../../assets/mine/zhubo.png'),
            radiolist:[
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感',
                //     time:'50分钟前',
                //     name:'夏天',
                //     num:99,
                // },
                // {
                //     music_list_photo:require('../../assets/image/cove.png'),
                //     music_list_name:'满满的画面感',
                //     time:'50分钟前',
                //     name:'夏天',
                //     num:99,
                // }
            ],
            myradiolist:[]
        }
    },
    created(){
        this.isAnchor()
        this.getmyreadradio()
    },
    methods:{
        isAnchor(){
            var url = this.$host1 + `home/radio/isAnchor`;
            this.$axios.get(url).then(res => {
                //console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.iszhbo=true
                } else if(resData.code == 0){
                    this.iszhbo=false
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getmyreadradio(){
            let url = this.$host1 + `home/radio/mySubscription`
            this.$axios.get(url,{
                params:{
                    pageSize:10000,
                    page:1,
                }
            }).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.myradiolist=resData.data
                }else{
                    this.myradiolist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.myradiolist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        select(i){
            this.cur=i
        },
        goBack(){
            this.$router.go(-1);
        },
        gotoradiodetail(i){
            this.$router.push({
                path: '/radiodetail',
                query: {
                    type: i.radio_id,
                }
            })
        },
    }
}
</script>
<style lang="scss">
.myradio{
    .header{
        width: 100%;
        height: 1rem;
        .h-back{
            width: 0.15rem;
            height: 0.26rem;
            img{
                width: 100%;
            }
        }
        .title{
            font-size: 0.36rem;
            font-weight: bold;
        }
        .active{
            font-size: 0.36rem;
            font-weight: bold
        }
        .h-right{
            width: 0.38rem;
            height: 0.5rem;
            img{
                display: inline-block;
                width: 100%;
            }
        }
    }
    .contents{
        margin-top: 1rem;
        .music-list{
            .list-item{
                height: 1.8rem;
                width: 100%;
                border-bottom: 0.01rem solid #e9e9e9;
                .cove{
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 0.22rem;
                    object-fit: cover;
                }
                .right{
                    height: 1.3rem;
                    width: calc(100% - 1.8rem);
                    //background-color: greenyellow;
                    .yuan{
                        width: 0.56rem;
                        height: 0.56rem;
                        margin-right: 0.2rem;
                    }
                    .fire{
                        width: 0.32rem;
                        height: 0.35rem;
                        margin-left: 0.3rem;
                        margin-right: 0.2rem;
                    }
                    .fires{
                        width: 0.32rem;
                        height: 0.35rem;
                        margin-right: 0.2rem;
                    }
                }
            }
            // .center{
            //     height: 1rem;
            // }
        }
        .center{
            height: 80vh;
            .box{
                width: 100%;
                height: 5rem;
                //background-color: greenyellow;
                img{
                    width: 0.9rem;
                    height: 1.42rem;
                    margin: 0 auto;
                }
                .fs-36{
                    margin-top: 0.5rem;
                }
                p{
                    text-align: center;
                }
            }
            .flex-column{
                width: 100%;
                height: 2.5rem;
                text-align: center;
                //background-color: pink;
                .btn{
                    width: 3.34rem;
                    height: 0.8rem;
                    border-radius: 0.4rem;
                    margin: 0 auto;
                }
            }
        }
    }
}
</style>